<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05_XHR-XHR响应数据和类型</title>
  <!-- 
  在JavaScript中，使用XMLHttpRequest（XHR）进行网络请求时，响应数据的处理和类型是非常重要的。XHR对象的响应数据可以是多种类型，具体取决于请求的内容和服务器的响应。
  1. 响应数据的基本属性
  -  `xhr.responseText` ：以字符串形式返回响应体。适用于文本数据，如HTML、JSON（在处理时需要解析）等。
  -  `xhr.responseXML` ：返回一个Document对象，表示XML格式的响应。如果响应内容不是有效的XML，则该属性为 `null` 。

  2. 响应类型的设置

  XHR允许设置响应类型，通过 `xhr.responseType` 属性来指定期望的响应数据类型。常见的响应类型包括：

  -  `""` （默认值）：表示响应数据将作为字符串返回（即 `responseText` ）。
  -  `"text"` ：将响应数据作为字符串返回（与默认值相同）。
  -  `"json"` ：将响应数据解析为JSON对象。服务器必须返回有效的JSON格式数据。
  -  `"document"` ：将响应数据作为XML文档返回，适用于XML格式的响应。
  -  `"blob"` ：将响应数据作为Blob对象返回，适用于二进制数据，如图像或文件。
  -  `"arraybuffer"` ：将响应数据作为ArrayBuffer对象返回，适用于处理原始二进制数据。

  3. 使用示例
  以下是一个使用XHR发送请求并处理不同响应类型的示例：

   处理JSON响应
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://api.example.com/data', true);
  xhr.responseType = 'json'; // 指定响应类型为JSON

  xhr.onload = function() {
      if (xhr.status === 200) {
          console.log(xhr.response); // 直接访问JSON对象
      } else {
          console.error('请求失败，状态码：' + xhr.status);
      }
  };

  xhr.send();
   处理文本响应
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://api.example.com/text', true);
  xhr.responseType = 'text'; // 指定响应类型为文本

  xhr.onload = function() {
      if (xhr.status === 200) {
          console.log(xhr.responseText); // 处理文本响应
      } else {
          console.error('请求失败，状态码：' + xhr.status);
      }
  };

  xhr.send();
   处理Blob响应
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://api.example.com/image', true);
  xhr.responseType = 'blob'; // 指定响应类型为Blob

  xhr.onload = function() {
      if (xhr.status === 200) {
          var blob = xhr.response; // 获取Blob对象
          var img = document.createElement('img');
          img.src = URL.createObjectURL(blob); // 创建URL并显示图像
          document.body.appendChild(img);
      } else {
          console.error('请求失败，状态码：' + xhr.status);
      }
  };

  xhr.send();
  总结
  - 响应数据的基本属性： `responseText` 用于文本响应， `responseXML` 用于XML响应。
  - 响应类型的设置：通过 `xhr.responseType` 可以指定响应数据的类型，包括 `json` 、 `text` 、 `document` 、 `blob` 和 `arraybuffer` 等。
  - 处理响应：根据不同的响应类型，使用相应的方式处理数据。
  -->
</head>
<body>

  <script>
    // 1. 创建一个XMLHttpRequest对象
    const xhr = new XMLHttpRequest()

    // onload监听数据加载完成
    xhr.onload = function () {
      console.log(xhr.response)
    }

    // 3. 配置请求信息
    xhr.open('GET', 'http://123.207.32.32:8000/home/multidata')
    // 4.2.json类型的接口
    // xhr.open("get", "http://123.207.32.32:1888/01_basic/hello_json")
    // 4.3.text类型的接口
    // xhr.open("get", "http://123.207.32.32:1888/01_basic/hello_text")
    // 4.4.xml类型的接口
    // xhr.open("get", "http://123.207.32.32:1888/01_basic/hello_xml")


    // 4. 发送请求
    xhr.send()


  </script>
  
</body>
</html>